<template>
    <div>
        <div v-for="(item,index) in cardList" class="d-flex justify-content-center pt-4" :key="index">
            <el-card class="box-card " :class="singleCheck(index)" @click="click(index,item)"
                :style="{width: width }"
            >
                <div class="row align-items-center">
                    <div v-for="(filed, index) in listField" 
                        :key="index" 
                        class="card_title col text-center">{{ item[filed]}}
                    </div>
                    <div v-if="operates" class="col d-flex justify-content-center">
                        <div v-for="operate in operates" class="text-center link-primary pe-3 btnCls" @click="$emit(operate.opeateMethod, item.id)">
                            {{ operate.opeateName }}
                        </div>
                        
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>
  
<script setup>
    import { reactive, ref, onMounted ,computed} from 'vue'

    const singleCheck = (act) => {
        //console.log("act", act);
        // return activeIndex.value==act?'active':'';
        if(props.isSelected && activeIndex.value==act)return 'active';
        return '';
    };

    const click = (index, item) => {
        activeIndex.value = index
        selectedItem.vlaue = item
        // console.log("activeIndex", activeIndex);
        // console.log("selectedItem", selectedItem);
        // console.log(selectedItem.vlaue.projectCode)
    }

    const props = defineProps({
        cardList: {
            type: Array,
            required: true
        },
        listField:{
            type: Array,
            required: true
        },
        operates: {
            type: Array,
            required: false
        },
        width: {
            type:String,
            default: '70%'
        },
        isSelected: {
            type:Boolean,
            default: false
        },
    })

    const activeIndex = ref()
    const selectedItem = reactive({})

    // 第二部：暴露方法
	defineExpose({
		selectedItem
	})
</script>
  
<style scoped>
    .btnCls{
        cursor:pointer;
    }
    .box-card.active {
        background: yellow;
    }
</style>